<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <p id="js">JavaScript</p>
    <div id="list">
        <p id="se">JavaSE</p>
        <p id="ee">JavaEE</p>
        <p id="me">JavaME</p>
    </div>

    <script>
        'use strict'
        /**
         * 插入节点
         * 我们获得某个 DOM 节点，假设这个 DOM 节点是空的，我们通过 innerHTML
         * 就可以添加一个元素了，但是这个 DOM 节点已经存在元素了，我们就不能这么干了，会产生覆盖！
         *  所以要 追加 append
         * */

        let js = document.getElementById('js');
        let list = document.getElementById('list');
        list.appendChild(js);  // 这个是把上面的节点移动到 list 里面，而不是复制

        // 通过 js 创建一个新的节点
        let newP = document.createElement('p');
        newP.id = 'newP';
        newP.setAttribute('id',"newP"); // 这行代码和上面是等价的，这样写更好
        newP.innerHTML = "<h1>Hello,lucien</h1>";
        // 追加到 list 中就可以在页面中展示了
        list.appendChild(newP);

        // 创建一个标签点
        let myScript = document.createElement('script');
        myScript.setAttribute('type','text/javascript');
        myScript.setAttribute('src','abac');
        list.appendChild(myScript);

        // 可以创建一个 style 标签
        let myStyle = document.createElement('style');
        // 给 style 中设置值
        myStyle.innerHTML = 'body{background-color:yellow;}';
        // 获取 head 节点
        let head = document.getElementsByTagName('head')[0];
        // 把 style 标签追加到 head 中
        head.appendChild(myStyle);

        // 追加到某个节点前面  insertBefore(newNode(要插入的新节点),targetNode(插入到哪个目标节点前面))
        let ee = document.getElementById('ee');
        list.insertBefore(js, ee);

        // 替换一个节点
        let python = document.createElement('p');
        python.innerText = "Python";
        let me = document.getElementById('me');
        list.replaceChild(python, me);
    </script>
</body>
</html>